<!DOCTYPE html>
<html lang="en">

<head th:replace="_th-fragment-template :: head-template"><title></title></head>

<body>

<!-- 导航 nav
1. ui 代表这是使用了 semantic-ui
2. teal 青色
3. inverted 反转 暂时没搞懂意思
4. attached 代表依附/无则会有圆角边框出现
5. menu 代表使用了 semantic-ui 的 menu 样式
6. item 代表每条内容都是在是 menu 下的
7. secondary 控制下方 item 的样式
8. custom-padded-tb-mini class 是自定义减小菜单栏间距
9. semantic-ui 自带 icon
10.
-->
<nav th:replace="_th-fragment-template :: nav-menu-template(1)"></nav>

<!-- 欢迎标语 -->
<div class="ui custom-padded-tb-medium container animate__animated animate__bounce">
    <div class="ui compact olive big message">
        <i class="close icon"></i>
        <div class="header"><i class="heart icon"></i>欢迎回来！</div>
        <br>
        <li><i class="time icon"></i> 2012 年 7 月 8 日</li>
        <li><i class="cloud icon"></i>多云</li>
        加油，今天又是新的一天！
    </div>
</div>

<!--中间内容 div-->
<div class="ui container animate__animated animate__fadeIn">
    <div class="ui stackable grid">

        <!-- 主页面左边内容元素 -->
        <div class="twelve wide column">
            <!--头部
            1. 左边显示博客
            2. 右边显示总发布博客文章数量
            -->
            <div class="ui top attached segment ">
                <div class="ui middle aligned two column grid">
                    <div class="column">
                        <h3 class="ui teal header">博客</h3>
                    </div>
                    <div class="right aligned column">
                        <h2 class="ui orange header custom-inline-block">14</h2> 篇
                    </div>
                </div>
            </div>

            <!--最新文章列表
            1. 第一条和头部相连
            2. 最后一条和尾部上下翻页相连
            -->
            <div class="ui attached segment">
                <div class="ui padded vertical segment">
                    <div class="ui mobile reversed stackable grid">
                        <div class="eight wide column">
                            <div class="ui stackable grid">
                                <div class="twelve wide column">
                                    <h2 class="ui header">文章标题123</h2>
                                    <div class="ui horizontal link list">
                                        <div class="item">
                                            <i class="clock outline icon"></i> 2021-7-27
                                        </div>

                                        <div class="item">
                                            <i class="eye icon"></i> 999
                                        </div>

                                        <div class="item">
                                            <i class="comment alternate outline icon"></i> 99
                                        </div>
                                        <div class="item">
                                            <i class="thumbs up outline icon"></i> 99
                                        </div>
                                    </div>
                                    <div class="ui horizontal link list">
                                        <div>
                                            <a href="#" class="ui green basic label custom-padded-medium">标签1</a>
                                            <a href="#" class="ui green basic label custom-padded-medium">标签2</a>
                                            <a href="#" class="ui green basic label custom-padded-medium">标签3</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="right aligned four wide column">
                                    <a href="#" class="ui orange basic label">分类1</a>
                                </div>
                            </div>
                            <br>
                            <p class="custom-page-description">这是一个文章描述的测试~</p>

                        </div>
                        <div class="eight wide column">
                            <a href="#" target="_self">
                                <img src="https://picsum.photos/800/450" alt="" class="ui rounded image">
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第二篇文章 -->
            <div class="ui attached segment">
                <div class="ui padded vertical segment">
                    <div class="ui mobile reversed stackable grid">
                        <div class="eight wide column">
                            <div class="ui grid">
                                <div class="twelve wide column">
                                    <h2 class="ui header">文章标题123</h2>
                                    <div class="ui horizontal link list">
                                        <div class="item">
                                            <i class="clock outline icon"></i> 2021-7-27
                                        </div>

                                        <div class="item">
                                            <i class="eye icon"></i> 999
                                        </div>

                                        <div class="item">
                                            <i class="comment alternate outline icon"></i> 99
                                        </div>
                                        <div class="item">
                                            <i class="thumbs up outline icon"></i> 99
                                        </div>
                                    </div>
                                    <div class="ui horizontal link list">
                                        <div>
                                            <a href="#" class="ui green basic label custom-padded-medium">标签1</a>
                                            <a href="#" class="ui green basic label custom-padded-medium">标签2</a>
                                            <a href="#" class="ui green basic label custom-padded-medium">标签3</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="right aligned four wide column">
                                    <a href="#" class="ui orange basic label">分类1</a>
                                </div>
                            </div>
                            <br>
                            <p class="custom-page-description">这是一个文章描述的测试~</p>

                        </div>
                        <div class="eight wide column">
                            <a href="#" target="_self">
                                <img src="https://picsum.photos/800/450" alt="" class="ui rounded image">
                            </a>
                        </div>
                    </div>
                </div>
            </div>


            <!--文章列表底部 上下翻页-->
            <div class="ui attached segment">
                <div class="ui middle aligned two column grid">
                    <div class="column">
                        <div class="ui animated orange basic button" tabindex="0">
                            <div class="visible content">上一页</div>
                            <div class="hidden content">
                                <i class="left arrow icon"></i>
                            </div>
                        </div>
                    </div>
                    <div class="right aligned column">
                        <div class="ui animated orange basic button" tabindex="0">
                            <div class="visible content">下一页</div>
                            <div class="hidden content">
                                <i class="right arrow icon"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主页面右边内容元素 -->
        <div class="four wide column">

            <!-- 每日算法 -->
            <div class="ui segments">
                <div class="ui secondary segment">
                    <div class="ui two column grid">
                        <div class="column">
                            <i class="code icon"></i> <b>每日算法</b>
                        </div>
                        <div class="right aligned column">
                            <a href="#">more<i class="angle double right icon"></i></a>
                        </div>
                    </div>
                </div>
                <div class="ui orange segment">
                    <h3><i class="hashtag icon"></i> LeetCode 217</h3>
                    <i class="bookmark icon"></i> 存在重复元素
                </div>
            </div>

            <!-- 天气 -->
            <div class="ui segments">
                <div class="ui secondary segment">
                    <i class="leaf icon"></i><b>天气</b>
                </div>
                <div class="ui yellow segment">
                    <h3>苏州 Suzhou</h3>
                    <div><b><i class="time outline icon"></i> 07-22</b></div>
                    <div><b><i class="cloud icon"></i> 多云</b></div>
                    <div><b><i class="thermometer half icon"></i>-273° ~ NaN°</b></div>
                </div>
            </div>

            <!--
                Top 5 文章(按照点赞量排序)
             -->
            <div class="ui segments">
                <!--
                    顶部 Top 5 和 more
                -->
                <div class="ui secondary segment">
                    <div class="ui two column grid">
                        <div class="middle aligned column">
                            <i class="bar chart icon"></i><b>TOP 5</b>
                        </div>
                        <div class="right aligned column">
                            <a href="categories.html">
                                more
                                <i class="angle double right icon"></i>
                            </a>
                        </div>
                    </div>
                </div>


                <!--                        <div class="ui fluid vertical menu">-->
                <!--                            <a href="./blog.html" class="item">-->
                <!--                                文章1-->
                <!--                                <div class="ui red basic label">-->
                <!--                                    <i class="thumbs outline up icon"></i>66-->
                <!--                                </div>-->
                <!--                            </a>-->
                <!--                            <a href="./blog.html" class="item">-->
                <!--                                文章2-->
                <!--                                <div class="ui red basic label">-->
                <!--                                    <i class="thumbs outline up icon"></i>60-->
                <!--                                </div>-->
                <!--                            </a>-->
                <!--                            <a href="./blog.html" class="item">-->
                <!--                                文章3-->
                <!--                                <div class="ui red basic label">-->
                <!--                                    <i class="thumbs outline up icon"></i>55-->
                <!--                                </div>-->
                <!--                            </a>-->
                <!--                            <a href="./blog.html" class="item">-->
                <!--                                文章4-->
                <!--                                <div class="ui red basic label">-->
                <!--                                    <i class="thumbs outline up icon"></i>50-->
                <!--                                </div>-->
                <!--                            </a>-->
                <!--                            <a href="./blog.html" class="item">-->
                <!--                                文章5-->
                <!--                                <div class="ui red basic label">-->
                <!--                                    <i class="thumbs outline up icon"></i>23-->
                <!--                                </div>-->
                <!--                            </a>-->
                <!--                        </div>-->
                <!--
                    Top 5 内容部分
                -->
                <div class="ui teal segment">


                    <div class="ui divided selection list">
                        <a href="./blog.html" class="item">
                            Java 为什么火
                            <div class="ui white basic horizontal tiny label">
                                <i class="thumbs up icon"></i>
                                23
                            </div>
                        </a>
                        <a href="./blog.html" class="item">
                            Java 为什么火
                            <div class="ui white basic horizontal tiny label">
                                <i class="thumbs up icon"></i>
                                23
                            </div>
                        </a>
                        <a href="./blog.html" class="item">
                            Java 为什么火
                            <div class="ui white basic horizontal tiny label">
                                <i class="thumbs up icon"></i>
                                23
                            </div>
                        </a>
                        <a href="./blog.html" class="item">
                            Java 为什么火
                            <div class="ui white basic horizontal tiny label">
                                <i class="thumbs up icon"></i>
                                23
                            </div>
                        </a>
                        <a href="./blog.html" class="item">
                            Java 为什么火
                            <div class="ui white basic horizontal tiny label">
                                <i class="thumbs up icon"></i>
                                23
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 标签 -->
            <div class="ui segments">
                <div class="ui secondary segment">
                    <div class="ui two column grid">
                        <div class="column">
                            <i class="tags icon"></i> <b>标签</b>
                        </div>
                        <div class="right aligned column">
                            <a href="categories.html">more<i class="angle double right icon"></i></a>
                        </div>
                    </div>
                </div>

                <div class="ui blue segment">
                    <a href="#" class="ui red basic left pointing label custom-margin-tb-tiny">
                        标签1
                        <div class="detail">99</div>
                    </a>
                    <a href="#" class="ui orange basic left pointing label custom-margin-tb-tiny">
                        标签2
                        <div class="detail">99</div>
                    </a>
                    <a href="#" class="ui yellow basic left pointing label custom-margin-tb-tiny">标签3
                        <div class="detail">99</div>
                    </a>
                    <a href="#" class="ui green basic left pointing label custom-margin-tb-tiny">标签4
                        <div class="detail">99</div>
                    </a>
                    <a href="#" class="ui blue basic left pointing label custom-margin-tb-tiny">标签5
                        <div class="detail">99</div>
                    </a>
                    <a href="#" class="ui teal basic left pointing label custom-margin-tb-tiny">标签6
                        <div class="detail">99</div>
                    </a>
                    <a href="#" class="ui purple basic left pointing label custom-margin-tb-tiny">标签7
                        <div class="detail">99</div>
                    </a>
                    <a href="#" class="ui pink basic left pointing label custom-margin-tb-tiny">标签8
                        <div class="detail">99</div>
                    </a>
                    <a href="#" class="ui black basic left pointing label custom-margin-tb-tiny">标签9
                        <div class="detail">99</div>
                    </a>
                </div>
            </div>

        </div>
    </div>
</div>

<!--底部元素 footer-->
<footer class="ui vertical segment">
    <div class="ui center aligned container">
        <div class="ui inverted section divider"></div>
        <p class="custom-font-spaced custom-opacity-mini">Copyright© 2021 - 2022 Lemonsoldout. All Rights Reserved.</p>
    </div>
</footer>

<!-- 回到最顶部按钮 -->
<a href="#" class="ui blue custom-article-details-buttons-position custom-article-details-buttons-right-bottom icon button">
    <i class="chevron up big icon"></i>
</a>

<!-- JS -->
<script>
    $('.menu.toggle').on('click', function () {
        $('.click-to-show-nav-menu-list').toggleClass('custom-mobile-hide-menu');
    });

    $('.message .close')
        .on('click', function () {
            $(this)
                .closest('.message')
                .transition('fly')
            ;
        })
    ;

    hljs.initHighlightingOnLoad();

    var tocbot;
    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3, h4, h5, h6',
        // For headings inside relative or absolute positioned containers within content.
        hasInnerContainers: true
    });

</script>

</body>
</html>